<template>
  <el-table class="table_box" :height="tabH" :style="{ width: '100%', height: tabH }" ref="multipleTableRef" :data="list" stripe @selection-change="handleSelectionChange" @select="onSelect" :header-cell-style="{ background: '#F9F9F9', color: '#909399' }">
    <el-table-column type="selection" width="55" fixed="left" />
    <el-table-column label="产品编号">
      <template #default="{ row }">
        <div class="name">{{ row.product_no }}</div>
      </template>
    </el-table-column>
    <el-table-column label="产品信息" width="200">
      <template #default="{ row }">
        <div style="display: flex; align-items: center">
          <el-image :preview-src-list="[row.cover]" :preview-teleported="true" :src="row.cover" fit="cover" class="avatar" style="width: 48px; height: 48px">
            <template #error>
              <el-image src="/static/file/pic.png" style="width: 48px; height: 48px"></el-image>
            </template>
          </el-image>
          <span style="margin-left: 12px">{{ row.product_name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="品类" width="200">
      <template #default="{ row }">
        <!-- <span v-if="row.group_id != 0">{{ row.category_name }}</span>
        <span v-else>默认品类</span> -->
        {{ row.category_name }}
      </template>
    </el-table-column>
    <el-table-column label="库存" width="130px">
      <template #default="{ row }">
        {{ row.stock_qty }}
      </template>
    </el-table-column>
    <el-table-column label="销量" width="100">
      <template #default="{ row }">
        {{ row.sale_qty }}
      </template>
    </el-table-column>
    <el-table-column label="售卖价格" width="200">
      <template #default="{ row }">
        {{ row.sale_price_range }}
      </template>
    </el-table-column>
    <el-table-column label="上架状态">
      <template #default="{ row }">
        {{ row.state_name }}
      </template>
    </el-table-column>
    <el-table-column label="库存状态" width="100">
      <template #default="{ row }">
        {{ row.stock_qty_state_name }}
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="200">
      <template #default="{ row }">
        {{ row.created_at }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300" fixed="right">
      <template #default="{ row }">
        <el-button size="small" @click="onChange(0, row)">{{ row.state !== 1 ? '下架' : '上架' }}</el-button>
        <el-button size="small" :disabled="row.state == 2" @click="edit(row)">编辑</el-button>
        <el-button size="small" @click="look(row)">查看</el-button>
        <el-button size="small" @click="preview(row)">预览</el-button>
        <el-button size="small" @click="onChange(4, row)">删除</el-button>
      </template>
    </el-table-column>
    <template #empty>
      <div style="height: 500px" class="emty">
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">{{ list.length || '暂无数据' }}</div>
      </div>
    </template>
  </el-table>
  <ZWPagination @submit="page" ref="PaginationRef"></ZWPagination>
  <!-- 删除弹框 -->
  <ZWDeletdialog ref="DeletdialogRef" @submit="onSubmit" />
  <!-- 预览弹窗 -->
  <productPopup ref="productPopupRef" :productPopupData="productPopupData" />
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { productList, productDel, productUpstate, productDownstate, productPreview } from '@/api/salesleads/productmanagement/product'
  import { ElMessage } from 'element-plus'
  import ZWPagination from '@/components/ZWPagination.vue'
  import ZWDeletdialog from '@/components/ZWDeletdialog.vue'
  import productPopup from './productPopup.vue'
  import { useStore } from '@/store'
  import { tableH, reSize } from '@/utils/utils'
  import router from '@/router'
  const tabH = ref('500px')
  const list = ref([])
  const isShow = ref(0)
  const state = ref()
  const id = ref()
  const checkList = ref([])
  const store = useStore()
  const DeletdialogRef: any = ref(null)
  const productPopupRef = ref(null)
  const productPopupData = ref([])
  const PaginationRef = ref()
  const emit = defineEmits(['select', 'selected'])
  let formData = reactive({
    product_name: '', //产品名
    state: 'all', //产品状态 all-全部  1-下架 2-上架
    category_id: [], //产品分类id  all-全部
    price_range: [], //价格区间
    stock_qty_state: 'all', //库存状态 all-全部 1-正常 2-无库存
    page: 1, //分页页码，数字类型
    page_size: 15 //页记录数
  })
  // 列表
  const getproductList = async () => {
    const res = await productList(formData)
    list.value = res.data
    store.dispatch('pageTotal', res.total)
    formData.page_size = +res.page_size
    console.log(res, 'list')
  }
  const inquire = (v: any, isReset: boolean) => {
    Object.assign(formData, { ...v, page: 1, page_size: isReset ? 15 : formData.page_size })
    getproductList()
    if (isReset) {
      console.log(PaginationRef.value.pageInit())
    }
  }
  getproductList()
  // 分页
  const page = (data: any) => {
    formData.page = data.page
    formData.page_size = +data.page_size
    getproductList()
  }
  // 查看
  const look = (v: any) => {
    router.push({
      path: '/salesleads/salesmanagement/productmanagement/create',
      query: { type: 'look', id: v.product_id }
    })
  }
  // 编辑
  const edit = (v: any) => {
    router.push({
      path: '/salesleads/salesmanagement/productmanagement/create',
      query: { type: 'edit', id: v.product_id }
    })
  }
  // 预览
  const preview = async (v: any) => {
    productPopupRef.value.drawer = true
    const res = await productPreview({ product_id: v.product_id })
    productPopupData.value = res
    console.log(productPopupData.value, 'productPopupData.value')
  }
  const product = ref([]) // 选中产品
  const handleSelectionChange = (val: any) => {
    let arr = []
    arr = val.map((item: any) => {
      return item.product_id
    })
    product.value = arr
    console.log(arr)

    emit('select', product.value)
  }
  // 当前选中行id
  const onSelect = (selection, row) => {
    if (selection.constructor === Array) {
      checkList.value = selection.map((v) => v.product_id)
      emit('selected', checkList.value)
    }
  }
  const onChange = (num: number, v: Object) => {
    if (num == 0 && v.state == 1) {
      DeletdialogRef.value.appDialog.title = '上架提醒'
      DeletdialogRef.value.content = '确定上架所选产品吗？'
    }
    if (num == 0 && v.state == 2) {
      DeletdialogRef.value.appDialog.title = '下架提醒'
      DeletdialogRef.value.content = '确定下架所选产品吗？'
    }
    if (num == 4) {
      DeletdialogRef.value.appDialog.title = '删除提醒'
      DeletdialogRef.value.content = '确认删除所选产品吗？'
    }
    isShow.value = num
    state.value = v.state
    id.value = v.product_id
    DeletdialogRef.value.appDialog.visible = true
  }
  // 弹窗保存
  const onSubmit = async () => {
    if (isShow.value == 0 && state.value == 1) {
      await productUpstate({ product_ids: [id.value] })
      ElMessage.success('上架成功')
    } else if (isShow.value == 0 && state.value == 2) {
      await productDownstate({ product_ids: [id.value] })
      ElMessage.success('下架成功')
    }
    if (isShow.value == 4) {
      await productDel({ product_id: id.value })
      ElMessage.success('删除成功')
    }
    DeletdialogRef.value.appDialog.visible = false
    getproductList()
  }
  // 表格的自适应高度
  const getTableH = () => {
    tabH.value = tableH('.table_box')
    console.log(tabH.value, 111)
  }
  onMounted(() => {
    reSize(getTableH)
    getTableH()
  })
  defineExpose({
    inquire,
    getTableH
  })
</script>
<style lang="scss" scoped>
  .el-button {
    margin-bottom: -8px;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 24px;
    margin: 0 4px 8px;
    border: 1px solid #eaeaea;
    border-radius: 2px;
    text-align: center;
    background: #fff;
  }
</style>
